

<li id="paymentStatus" style="display: list-item;position: relative;">
    <label>收款状态:</label>
    <span class="ui-tree-wrap" id="paymentStatusSpan" style="width:255px">
        <input type="text" class="input-txt" style="width:225px" id="paymentStatusName" autocomplete="off" placeholder="全部" value="" readonly="readonly" >
        <span class="trigger" id="paymentStatusTrigger"></span>
    </span>

    <div class="ui-droplist-wrap" id="paymentStatusBox" style="position: absolute; z-index: 1000; width: 255px; display: none;left: 80px;top: calc(100% + 2px);height: 150px;overflow: auto; ">
       
    </div>
    
</li>

<input type="hidden" id="paymentStatusId" value="">



<script type="text/javascript">
	$(document).ready(function () {
        // 树
        $('#paymentStatusBox').tree({
			// url: 'getSupplierCategory.html',
			data: [{
				id:-1,
				text: '全部',
				children: [{
					id:2,
					text: '未收款'
				},{
					id:3,
					text: '部分收款'
				},{
					id:4,
					text: '全部收款'
				}]
			}],
			checkbox:true,
			onClick: function (node) {
				if(node.checked){
                    $(this).tree('uncheck',node.target);
                }else{
                    $(this).tree('check',node.target);
                }
			}
		});


        // 点击选择收款状态
		$("#paymentStatusSpan").click(function(){
			$("#paymentStatusBox").toggle();
		});

    })

    //选择框外点击则隐藏
    $(document).mouseup(function (e) {
        if(e.target.id!="paymentStatusTrigger" && e.target.id!="paymentStatusName"){
            var con = $("#paymentStatusBox");   // 设置目标区域
            if (!con.is(e.target) && con.has(e.target).length === 0) {
                $("#paymentStatusBox").hide();
                var nodes = $('#paymentStatusBox').tree('getChecked');
                var catorageText="";
                var catorageId="";
                for (let index = 0; index < nodes.length; index++) {
                    if(nodes[index].id!=-1){
                        catorageText += nodes[index].text+",";
                        catorageId += nodes[index].id+",";
                    }
                }
                catorageId=catorageId.substr(0,catorageId.length-1);
                catorageText=catorageText.substr(0,catorageText.length-1);
                // console.log(catorageId);
                // 赋值
                $("#paymentStatusName").val(catorageText);
                $("#paymentStatusId").val(catorageId);
            }
        } else{
            if($("#paymentStatusBox").css("display") != "none"){
                var nodes = $('#paymentStatusBox').tree('getChecked');
                var catorageText="";
                var catorageId="";
                for (let index = 0; index < nodes.length; index++) {
                    if(nodes[index].id!=-1){
                        catorageText += nodes[index].text+",";
                        catorageId += nodes[index].id+",";
                    }
                }
                catorageId=catorageId.substr(0,catorageId.length-1);
                catorageText=catorageText.substr(0,catorageText.length-1);
                // 赋值
                $("#paymentStatusName").val(catorageText);
                $("#paymentStatusId").val(catorageId);
            }
        }
    });
</script>